<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#bt1, #bt2, #bt3 {
	padding-top: 10px;
	padding-left: 10px;
	width: 300px;
	height: 400px;
	float:left;
	border: 4px inset #6799FF;
	border-radius: 20px;
	margin-right: 10px;
	margin-top: 10px;
}

#pageDiv1, #pageDiv2, #pageDiv3{
 width: 95%;
 height: 300px;
 border: 3px solid orange;
 border-radius: 20px;
 padding-top: 10px;
}

#btnPage1, #btnPage2, #btnPage3{
width : 80px;
height : 30px;
border : 1px dotted blue;
border-radius : 10px;
margin-bottom: 15px;
}

</style>

<script>
var xhr;
var rs;

function init(){
	if(window.ActiveXObject){
		alert("브라우저를 업그레이드 하세요");
		return;
	}
	
	// xhr 객체
	xhr = new XMLHttpRequest();
	xhr.onreadystatechange = myFunc; // XMLHttp 객체의 상태값이 바뀌면
												// myFunc를 호출한다.  (callback 형태의 함수)
	
	var btn1 = document.getElementById("btnPage1");
	var btn2 = document.getElementById("btnPage2");
	var btn3 = document.getElementById("btnPage3");
	
	var div1 = document.getElementById("pageDiv1");
	var div2 = document.getElementById("pageDiv2");
	var div3 = document.getElementById("pageDiv3");
	
	btn1.onclick = function(){
		console.log('response', '버튼 1 클릭');
		
		var url = "./text1.html";
		xhr.open('get', url, true);
		xhr.send();
		rs = div1;
	}
	
	btn2.onclick = function(){
		console.log('response', '버튼 2 클릭');
		
		var d = document.getElementById('dan').value;
		var url = "./text2.jsp?dan=" + d;  // dan 의 Input의 value 값을 url 뒤에다가 붙혀서 parameter를 넘긴다.
		xhr.open('get', url, true); // true 를 통해서 비동기방식을 활성화시킨다는 뜻?!
		xhr.send();
		rs = div2;
	}
	
	btn3.onclick = function(){
		console.log('response', '버튼 3 클릭 ');
		
		var url = "./text3.txt";
		xhr.open('get', url, true);
		xhr.send();
		rs = div3;
	}
	
	
	function myFunc(){
		/* rs.innerHTML += '<li>status : ' + xhr.status;
		rs.innerHTML += '<li>ready Status : ' + xhr.readyStatus; */
		
		if(xhr.status == 200 && xhr.readyState == 4){
			rs.innerHTML = xhr.responseText;
		}
	}
	
}
</script>

<title>Response Text</title>
</head>
<body>
<h1>ResponseText Example</h1>
	<div id="bt1">
		<center><input type="button" id="btnPage1" value="버튼1" ></center>
		<div id="pageDiv1">
		</div>
	</div>
	
	<div id="bt2">
		<center><label>구구단</label>&ensp;:&ensp;<input type="text" name="dan" id="dan" value="2" size="4">&ensp;
		<input type="button" id="btnPage2" value="버튼2"></center>
		<div id="pageDiv2">
		</div>
	</div>
	
	<div id="bt3">
		<center><input type="button" id="btnPage3" value="버튼3"></center>
		<div id="pageDiv3">
		</div>
	</div>

<script> init(); </script> 
</body>
</html>